<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path=request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
<link href="css/bootstrap.min.css" />
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css"/>
<link rel="stylesheet" type="text/css" href="css/templatemo_style.css"/>
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.useso.com/css?family=Alegreya+Sans+SC:100,300,400,500,700,800,900,100italic,300italic,400italic,500italic,700italic,800italic,900italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<style type="text/css">
	
	.dropleft{
		float: left;
	}
	.box_1{
		float: right;
		padding-right: 20px;
	}
	.box_1 button{
		float: right;
		margin-left: 15px;
		margin-top: 20px;
	}
	
</style>

<script type="text/javascript">
		jQuery(document).ready(function($) {
			$(".scroll").click(function(event){		
				event.preventDefault();
				$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
			});
		});
</script>	
				
<!-- start menu -->
<script src="js/simpleCart.min.js"> </script>
<link href="css/memenu.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/memenu.js"></script>
<script>$(document).ready(function(){$(".memenu").memenu();});</script>	

 <script>
            $(function () {
                
                //表单验证
                $('input[name="loginbtn"]').click(function(event) {
                    var $name = $('input[name="username"]');
                    var $password = $('input[name="password"]');
                    var $verify = $('input[name="verify"]');
                    var $text = $('#text');
                    var _name = $.trim($name.val());
                    var _password = $.trim($password.val());
                    var _verify = $.trim($verify.val());

                    if('' == _name){
                       // $text.text('请输入用户名！');
                        $name.focus();
                        return false;
                    }
                    if('' == _password){
                        //$text.text('请输入密码！');
                        $password.focus();
                        return false;
                    }
                    if('' == _verify){
                       // $text.text('请输入验证码！');
                        $verify.focus();
                        return false;
                    }                 
                    
                    $("#submitForm").attr("action", "JavaScript:validate();").submit();
                   					
                });
            });
    </script>      

<script type="text/javascript">
var code  //在全局 定义验证码 
function createCode(){ 
		code = "";  
		var codeLength = 4;//验证码的长度  
		var checkCode = document.getElementById("canvas");
		checkCode.value = ""; 
		var selectChar = new Array(2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','J','K','L','M','N','P','Q','R','S','T','U','V','W','X','Y','Z');
		  for(var i=0;i<codeLength;i++) 
		    {  
			  var charIndex = Math.floor(Math.random()*32);   
			  code +=selectChar[charIndex];
		    }
		  if(code.length != codeLength)
		    {    
			  createCode(); 
		    }
		checkCode.value = code; 
}
//canvas创建

function draw(id)
{
	var canvas=document.getElementById(id);
	var a,b,c,color;
	var d=-10;
	if(canvas==null)
	return false;
	var context=canvas.getContext("2d");
	createCode();//调用函数生成验证码
	context.fillStyle="#86D149";   //填充颜色，背景颜色
	context.fillRect(0,0,100,35);//画矩形
	for(i=0;i<4;i++)//通过循环实现各个字体颜色和格式设置
	{ 
		a = Math.floor(Math.random()*256);
		b = Math.floor(Math.random()*256);
		c = Math.floor(Math.random()*256);
		d = d + 20;//设置文字坐标，左上角为坐标原点
		color = "rgb(" + ''+ a +","+ b +"," + c +")";//拼接字符串,"rgb(a,b,c)";
	    context.fillStyle=color;     //字体颜色  "rgb(a,b,c)";
	    context.strokeStyle=color;   //字体阴影颜色
	    context.font="italic 23px sans-serif"; //字体样式设置 样式和大小
	    context.textBaseline="top";     //对齐方式
	    context.fillText(code[i],d,10);//填充字符创
	    context.strokeText(code[i],d,10);//轮廓字符串
    }
}

//验证方法，登录时调用
function validate () 
{  
	var inputCode = document.getElementById("input").value.toUpperCase(); //中间名字为输入验证码框的id
	if(inputCode.length <=0)
	{    alert("请输入验证码！"); 
       return false; }  
	else if(inputCode != code )
	{    alert("验证码输入错误！"); 
	//createCode(); 
	 draw('canvas');
	} 
	else {     
		 
		$("#submitForm").attr("action", "login").submit(); 
	
	}
	} 
	function  resetpwd(){
		var pwd1=document.getElementById("password1").value;
		var pwd2=document.getElementById("password2").value;
		if(pwd1!=pwd2){
				
			document.getElementById("testpwd").innerHTML="*密码有误，请重设！*";
			return false;
		}
		else
		return true;
	}

</script>
<script>
		 $(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>


</head>
<body onload="draw('canvas')">  <!-- 打开网页调用canvas函数，生成验证码 -->
	<!--top-header-->
	<div class="top-header">
	<div class="topcolor">
			<div class="top-header-middle">
				<a href="index.html"><img src="image/logo-1.png" alt="" class="image-header"/></a>
				<div class="btn-toright">
				<div class="cart box_1">												
					<p class="load" data-toggle="modal" data-target="#myModalLogin">登陆<p class="load-shu"></p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
					<!--登陆模态框-->
					<div class="modal fade" id="myModalLogin" tabindex="-1" role="dialog" 
						   aria-labelledby="myModalLabel" aria-hidden="true">
						   <div class="modal-dialog">
						      <div class="modal-content">
						         <div class="modal-header">
						            <button type="button" class="close" 
						               data-dismiss="modal" aria-hidden="true">
						                  &times;
						            </button>
						            <h4 class="modal-title" id="myModalLabel">
						   	   用户登陆
						            </h4>
						         </div>
						         <div class="modal-body">
						         	<!--modal body start-->
						    <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="#" method="post"id="submitForm">				
						        <div class="form-group">
						          <div class="col-xs-12">		            
						            <div class="control-wrapper">
						            	<label for="username" class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
						            	<input type="text" class="form-control" id="username" placeholder="用户名" >
						            </div>		            	            
						          </div>              
						        </div>
						        <div class="form-group">
						          <div class="col-md-12">
						          	<div class="control-wrapper">
						            	<label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
						            	<input type="password" class="form-control" id="password" placeholder="密码" >
						            </div>
						          </div>
						        </div>
						         <div class="form-group">
						          <div class="col-md-12">
						          	<div class="control-wrapper">
						          		<label >用户类型：</label>
						            	<!--<select>
						            		<option>学生</option>
						            		<option>教师</option>
						            		<option>管理员</option>
						            	</select>-->
						            	<label><input type="radio" id="student" name="user" />学生</label>&nbsp;&nbsp;&nbsp;&nbsp;
						            	<label><input type="radio" id="teacher" name="user"/>教师</label>&nbsp;&nbsp;&nbsp;&nbsp;
						                <label><input type="radio" id="admin"  name="user"/>管理员</label>&nbsp;&nbsp;&nbsp;&nbsp;
						            </div>
						          </div>
						        </div>
						        <div class="form-group">
						          <div class="col-md-12">
					             	<div class="testbox control-wrapper">
					             		
					                		 <div class="verifyimg">
					                            <canvas id="canvas" width="100px" height="50px">
					                            </canvas>
					                            <a id="" href="javascript:draw('canvas')" class="change">看不清,换一张</a>
					                            </div>
              							<label>
					                  		<input type="text" class="form-control" id="input" name="verify" placeholder="验证码">
				                		</label>
					              	</div>
						          </div>
						        </div>
							 </div>
						      </form>   
						         <!--modal body end-->
						         <div class="modal-footer">
						         	<label id="alterLableLogin"></label>
						            <button type="button" class="btn btn-default" 
						               data-dismiss="modal">关闭
						            </button>
						            <button type="submit" class="btn btn-primary" onclick="checkform()">
						            	   登陆
						            </button>
						         </div>
						      </div><!-- /.modal-content -->
						</div><!-- /.modal -->
						</div>
				</div>
				
				<!--登陆模态框结束-->
	
			<div class="cart box_1">
					<p class="load" data-toggle="modal" data-target="#myModalRegister">忘记密码<p class="load-forget"></p></p>	
					
					<!-- 重置密码模态框（Modal） -->
						<div class="modal fade" id="myModalRegister" tabindex="-1" role="dialog" 
						   aria-labelledby="myModalLabel" aria-hidden="true">
						   <div class="modal-dialog">
						      <div class="modal-content">
						         <div class="modal-header">
						            <button type="button" class="close" 
						               data-dismiss="modal" aria-hidden="true">
						                  &times;
						            </button>
						            <h4 class="modal-title" id="myModalLabel">
						             更改密码
						            </h4>
						         </div>
						         <div class="modal-body">
						          	<!--  更改密码模态框开始-->
						          	 <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" role="form" action="#" method="post"id="submitForm">
						          	<div class="form-group">
						          <div class="col-xs-12">		            
						            <div class="control-wrapper">
						            	<label for="username" class="control-label fa-label"><i class="fa fa-user fa-medium"></i></label>
						            	<input type="text" class="form-control" id="username" placeholder="用户名" >
						            </div>		            	            
						          </div>              
						        </div>
						        <div class="form-group">
						          <div class="col-md-12">
						          	<div class="control-wrapper">
						            	<label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
						            	<input type="text" class="form-control" id="password1" placeholder="新置密码" >
						            </div>
						          </div>
						        </div>
						        <div class="form-group">
						          <div class="col-md-12">
						          	<div class="control-wrapper">
						            	<label for="password" class="control-label fa-label"><i class="fa fa-lock fa-medium"></i></label>
						            	<input type="text" class="form-control" id="password2" placeholder="确认密码" onblur="resetpwd()">
						            	<label id="testpwd"></label>
						            </div>
						          </div>
						        </div>
						         </div>
						         <div class="modal-footer">
						            <button type="button" class="btn btn-default" 
						               data-dismiss="modal">关闭
						            </button>
						            <button type="button" class="btn btn-primary">
						           提交
						            </button>
						         </form>   
						         </div>
						      </div><!-- /.modal-content -->
						</div><!-- /.modal -->
						</div>
				
				<!--了解模态框结束-->
				
			 </div>
		 </div>	
	  </div>
	</div>
</div>

<!--<div class="header-bottom">		
			<div class="top-nav">
				<ul class="memenu skyblue">					
					<li ><a href="index.jsp">首页</a></li>					
					<li ><a href="http://jwc.henu.edu.cn/default.asp">河南大学教务处</a></li>					
					<li ><a href="http://xk1.henu.edu.cn/cas/login.action">河南大学选课系统</a></li>					
					<li ><a href="mysubject.jsp">河南大学</a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>
	</div>-->
	
	<div class="" id="home">
		<div  id="top" class="callbacks_container">
			<ul class="rslides" id="slider4">
			    <li>
			    	<div class="setw">
					<div class="banner-1"></div>
					</div>
				</li>
				<li>
					<div class="setw">
					<div class="banner-2"></div>
					</div>
				</li>
				<li>
					<div class="setw">
					<div class="banner-3"></div>
					</div>
				</li>
				<li>
					<div class="setw">
					<div class="banner-4"></div>
					</div>
				</li>
			</ul>
		</div>
		<div class="clearfix"> </div>
	</div>
	<!--banner-ends--> 
	<!--Slider-Starts-Here-->
			<script src="js/responsiveslides.min.js"></script>
			 <script>
			    // You can also use "$(window).load(function() {"
			    $(function () {
			      // Slideshow 4
			      $("#slider4").responsiveSlides({
			        auto: true,
			        pager: true,
			        nav: false,
			        speed: 500,
			        namespace: "callbacks",
			        before: function () {
			          $('.events').append("<li>before event fired.</li>");
			        },
			        after: function () {
			          $('.events').append("<li>after event fired.</li>");
			        }
			      });
			
			    });
			  </script>
			<!--End-slider-script-->
	
	
	
	<div class="footer-end">
		
		<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
	</div>
	<!--end-footer-text-->	
	<div class="bottom-below">
		        <p class="friend-link">
		                 友情链接：
		        <a href="http://software.henu.edu.cn/">河南大学软件学院</a>&nbsp;&nbsp;&nbsp;&nbsp;
		        <a href="http://www.henu.edu.cn/">河南大学官网</a>&nbsp;&nbsp;&nbsp;&nbsp;
		        <a href="http://jwc.henu.edu.cn/default.asp">河南大学教务处</a>&nbsp;&nbsp;&nbsp;&nbsp;
		        <a href="http://xk1.henu.edu.cn/cas/login.action">河南大学选课系统</a>&nbsp;&nbsp;&nbsp;&nbsp;
		        <a href="http://news.henu.edu.cn/">河南大学新闻网</a>&nbsp;&nbsp;&nbsp;&nbsp;
		        </p>
            	<p class="end-p"><a href="http://www.henu.edu.cn/">河南大学</a>软件学院蒲公英工作室&nbsp;&nbsp;Copyright &copy;&nbsp;&nbsp;2016www.henu.edu.cn&nbsp;&nbsp;&nbsp;&nbsp;地址：河南省开封市河南大学&nbsp;&nbsp;&nbsp;&nbsp;<img src="image/gif011.gif" class="img4"> 0371-22222222</p>
	</div>
</body>
</html>